/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

import Add from '../Add';
import Alert from '@spectrum-icons/express/Alert';
import React from 'react';
import {Flex} from '@react-spectrum/layout';
import { Meta, StoryFn } from '@storybook/react';

export default {
  title: 'Icons/Express',
  parameters: {
    chromaticProvider: {express: true},
  }
} as Meta<typeof Add>;

export const IconAddWithSizes: StoryFn<typeof Add> = () => renderIconSizes(Add, { 'aria-label': 'Add' });

IconAddWithSizes.story = {
  name: 'icon: Add with sizes',
};

export const Colors: StoryFn<typeof Alert> = () => (
  <Flex gap="size-200">
    <Alert aria-label="info default" />
    <Alert color="informative" aria-label="info alert" />
    <Alert color="negative" aria-label="negative alert" />
    <Alert color="positive" aria-label="positive alert" />
    <Alert color="notice" aria-label="notice alert" />
  </Flex>
);

function renderIconSizes(Component, props) {
  let sizes = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
  return (
    <div>
      {sizes.map((size) => {
        return <Component margin="15px" size={size} {...props} />;
      })}
    </div>
  );
}
